@import "../widget/reset";
@import "../widget/quick_layout";

.box {
  width: 400px;
  background-color: #B6E2D3;
  margin: 0 auto;
  position: relative;
}

.target {
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background-color: #3c948b;
}

#demo1 {
  .target.animate {
    animation-name: move_1;
    animation-duration: 2s;
    animation-delay: 1s;

    &.target_1 {
      animation-fill-mode: backwards;
    }
    &.target_2 {
      animation-fill-mode: forwards;
    }
    &.target_3 {
      animation-fill-mode: both;
    }
  }
}

@keyframes move_1 {
  0% {
    transform: translate(-50px, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 0);
  }
}

#demo2 {
  .target.animate {
    animation-name: move_2;
    animation-duration: 2s;
    animation-delay: 1s;

    &.target_1 {
      animation-fill-mode: backwards;
    }
    &.target_2 {
      animation-fill-mode: forwards;
    }
    &.target_3 {
      animation-fill-mode: both;
    }
  }
}

@keyframes move_2 {
  50% {
    transform: scale(1.2, 1.2);
  }
}

#demo3 {
  .target.animate {
    animation-name: move_3;
    animation-duration: 2s;
    animation-delay: 1s;

    &.target_1 {
      animation-fill-mode: none;
    }
    &.target_2 {
      animation-fill-mode: backwards;
    }
    &.target_3 {
      animation-fill-mode: forwards;
    }
    &.target_4 {
      animation-fill-mode: both;
    }
  }
}

@keyframes move_3 {
  50% {
    transform: scale(1.2, 1.2);
  }
}

#demo4 {
  .target {
    transform: scale(1.2, 1.2);
  }

  .target.animate {
    animation-duration: 2s;
    animation-delay: 1s;

    &.target_1 {
      animation-fill-mode: none;
      animation-name: move_4_01;
    }
    &.target_2 {
      animation-fill-mode: backwards;
      animation-name: move_4_01;
    }
    &.target_3 {
      animation-fill-mode: forwards;
      animation-name: move_4_01;
    }

    &.target_1_02 {
      animation-fill-mode: none;
      animation-name: move_4_02;
    }
    &.target_2_02 {
      animation-fill-mode: backwards;
      animation-name: move_4_02;
    }
    &.target_3_02 {
      animation-fill-mode: forwards;
      animation-name: move_4_02;
    }
  }
}

@keyframes move_4_01 {
  0% {
    transform: translate(-50px, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 0);
  }
}

@keyframes move_4_02 {
  0% {
    transform: translate(-50px, 0) scale(1.2, 1.2);
  }

  50% {
    transform: translate(0, 0) scale(1.2, 1.2);
  }

  100% {
    transform: translate(50px, 0) scale(1.2, 1.2);
  }
}

#demo5 {
  .target.animate {
    animation-duration: 1s, 1s;
    animation-delay: 1s, 2s;
    animation-fill-mode: both;

    &.target_1 {
      animation-name: move_5, bg_change_5;
    }
    &.target_2 {
      animation-name: bg_change_5, move_5;
    }
  }
}

@keyframes move_5 {
  0% {
    transform: translate(-50px, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 0);
  }
}

@keyframes bg_change_5 {
  0% {
    background-color: orange;
    transform: scale(0.8);
  }

  100% {
    background-color: red;
    transform: scale(1.2);
  }
}

#demo6 {
  .target:not(.target_1) {
    visibility: hidden;
    opacity: 0;
  }

  .target.animate {
    &.target_2 {
      animation-name: move_6_01, move_6_02;
      animation-duration: 1s, 1s;
      animation-delay: 0s, 2s;
      animation-fill-mode: both;
    }
  }
}

#demo7 {
  .target:not(.target_1) {
    visibility: hidden;
    opacity: 0;
  }

  .target.animate {
    &.target_2 {
      animation-name: move_6_01, move_6_02;
      animation-duration: 1s, 1s;
      animation-delay: 0s, 2s;
      animation-fill-mode: both,forwards;
    }
  }
}

@keyframes move_6_01 {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50px, 0);
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes move_6_02 {
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translate(50px, 0);
  }
}

#demo8 {
  .target:not(.target_1) {
    visibility: hidden;
    opacity: 0;
  }

  .target.animate {
    &.target_2 {
      animation-name: move_8_01, move_8_02;
      animation-duration: 1s, 1s;
      animation-delay: 0s, 2s;
      animation-fill-mode: both,forwards;
    }
  }
}

@keyframes move_8_01 {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50px, 0);
  }

  100% {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes move_8_02 {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
  }

  100% {
    visibility: hidden;
    opacity: 0;
    transform: translate(50px, 0);
  }
}